<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https:d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
  var svg = d3.select('body').append('svg')
    .attr('width',600)
    .attr('height',600)
    .attr('transform','translage('+300+','+300+')')
  var circle1 = svg.append('circle')
    .attr('cx',100)
    .attr('cy',100)
    .attr('r',45)
    .style('fill','green')
    .transition()
      .duration(1000)
      .attr('r',80)
      .attr('cx',300)
//uration()
//指定过渡的持续时间，单位为毫秒。

//如 duration(2000) ，指持续 2000 毫秒，即 2 秒。

//ease()
//指定过渡的方式，常用的有：

//linear：普通的线性变化
//circle：慢慢地到达变换的最终状态
//elastic：带有弹跳的到达最终状态
//bounce：在最终状态处弹跳几次
//调用时，格式形如： ease(“bounce”)。

//delay()
//指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。
</script>
</body>
</html>